<template>
  <bm-overlay
    ref="customOverlay"
    pane="labelPane"
    @draw="draw">
    <el-tag effect="dark" type="success">{{ title }}</el-tag>
  </bm-overlay>
</template>


<script>
export default {
  name: "CustomerOverLay",
  props: {
    title: {
      type: String,
      default: ''
    },
    position: Object,
    default: {},
  },
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  methods: {
    draw({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x + 'px'
      el.style.top = pixel.y + 'px'
    }
  }
}
</script>

<style scoped>

</style>
